<script setup lang="ts">
import { computed } from 'vue'
import { smallSegmentHeight } from '@/utils/lib'
import { client } from '@/utils/http'
import { useQuery } from '@tanstack/vue-query'
import useFilterStore from '@/stores/filter'
import { storeToRefs } from 'pinia'
import { toPercent, toThousand } from '@/utils/filter'

const filterStore = useFilterStore()

const { ymdId, checkDataUpdateNum } = storeToRefs(filterStore)

const { data, isFetching } = useQuery<{
  toShopQty: number
  etlDt: string
  toShopTarg: number
  onlineRate: string
  natureRate: string
  toShopSpeed: number
}>({
  keepPreviousData: true,
  queryKey: ['/saleCoreBoard/getToShopCustomers', ymdId, checkDataUpdateNum],
  queryFn: () => client('/saleCoreBoard/getToShopCustomers', { ymdId: ymdId.value }),
  enabled: computed(() => !!ymdId.value)
})

const overviewDatas = computed(() => {
  if (!data.value) {
    return []
  }
  const { toShopQty, toShopTarg, onlineRate, natureRate, toShopSpeed } = data.value
  return [
    {
      label: '到店月目标',
      value: toThousand(toShopTarg)
    },
    {
      label: '到店组数进度',
      value: toPercent(toShopSpeed, 1, false, '%', 1)
    },
    {
      label: '实际到店',
      value: toThousand(toShopQty)
    },
    {
      label: '线上邀约占比',
      value: toPercent(onlineRate, 1, false, '%', 1)
    },
    {
      label: '自然到店占比',
      value: toPercent(natureRate, 1, false, '%', 1)
    }
  ]
})
</script>
<template>
  <Segment
    :height="smallSegmentHeight"
    title="到店客户"
    :right="`数据截止日期: ${data?.etlDt || ''}`"
    :loading="isFetching"
  >
    <div class="store-customers">
      <div class="item-values" v-for="overview in overviewDatas" :key="overview.label">
        <div class="label">{{ overview.label }}</div>
        <div class="value">{{ overview.value }}</div>
      </div>
    </div>
  </Segment>
</template>
<style lang="less" scoped>
.store-customers {
  height: calc(100% - 32px);
  padding: 8px 16px 10px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  .item-values {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .label {
      color: var(--unnamed, #fff);
      font-family: Alibaba PuHuiTi 2;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 14px; /* 100% */
    }
    .value {
      color: #fff;
      font-family: DIN Alternate;
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }
  }
}
</style>
